<template>
	<view>
		<u-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>
		<view class="user-info">
			<u-image :showLoading="true" width="80px" height="80px" class="userinfo-avatar" :src="userInfo.avatarUrl"
				shape="circle" :fade="true" duration="450"></u-image>


		</view>
		<view class="user-info" style="margin-top: 0;">
			<text class="userinfo-nickname">{{userInfo.nickName}}</text>
		</view>
		<view class="login-box" v-if="timeLong">
			<u-count-down ref="countDown" :time="timeLong" :autoStart="false" @finish="onChange" millisecond
				format="ss:SSS"></u-count-down>
		</view>
		<view class="" v-else>

			<u-empty width="80" height="80" mode="data" textColor="#111115"
				icon="http://cdn.uviewui.com/uview/empty/data.png" text="点击登录进行倒计时">
			</u-empty>
		</view>
		<u-gap marginTop="60"></u-gap>
		<view class="login-box">
			<template v-if="agree">
				<!-- <button open-type="getPhoneNumber">登录</button> -->
				<u-button @click="login" type="primary" size="small">登录</u-button>
			</template>
			<template v-else>
				<u-button @click="login" type="primary" size="small">登录</u-button>
				<u-gap color="#2979ff" direction="col"></u-gap>
				<u-button @click="loginUserInfo" type="success" size="small">获取用户的基本信息登录</u-button>

			</template>
		</view>

		<u-modal :show="showModal" title="登录提示">
			<view class="slot-content">
				<rich-text :nodes="'请您同意'"></rich-text>
			</view>
			<view class="btm-class-box" slot="confirmButton">
				<u-line color="#2979ff"></u-line>
				<view class="btm-class">
					<button class="custom-style-button" @click="cancel">取消</button>
					<u-line color="#2979ff" direction="col"></u-line>
					<button class="custom-style-wx" open-type="getPhoneNumber"
						@getphonenumber="getphonenumber">登录</button>
				</view>

			</view>

		</u-modal>

		<u-modal :show="showUserInfoModal" title="登录提示">
			<view class="slot-content">
				<rich-text :nodes="'请您同意'"></rich-text>
			</view>
			<view class="btm-class-box" slot="confirmButton">
				<u-line color="#2979ff"></u-line>
				<view class="btm-class">
					<button class="custom-style-button" @click="cancel">取消</button>
					<u-line color="#2979ff" direction="col"></u-line>
					<!--高版本微信接口小程序基础库2.8+-->
					<button v-if="canIUseGetUserProfile" @click="getUserProfile"> 获取头像昵称 </button>
					<!--兼容7.08以下的微信版本接口-->
					<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo"> 获取头像昵称old </button>


				</view>

			</view>

		</u-modal>
		<u-divider text="分割线" hairline></u-divider>
		<view class="agreement-box">
			<u-radio label="同意" v-model="agree"></u-radio>
			<u-text class="agreement" mode="link" @click="toAgreement(0)" text="协议地址">
				
			</u-text>
			<u-text class="agreement" mode="link" @click="toAgreement(1)" text="隐私协议">
				
			</u-text>
		</view>
		<view class="">
			<input type="text" v-model="registry.userName">
			<input type="text" v-model="registry.passwordHash">
			<button @click="loginU">login</button>
		</view>
	</view>
</template>

<script>
	import {Login} from '@/config/api.js'
	export default {
		data() {
			return {
				agree: false,
				showModal: false,
				showUserInfoModal: false,
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				userInfo: {},
				timeLong: 0,
				registry:{
					userName:"",
					passwordHash:""
				}
			}
		},
		onLoad() {
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true;
			}
		},
		onTabItemTap() {

		},
		methods: {
			loginU(){
				Login(this.registry).then(res=>{
					console.log(res);
				})
			},
			getUserProfile(e) {
				// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				if (uni.getUserProfile) {
					uni.getUserProfile({
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							this.showUserInfoModal = false;
							this.userInfo = res.userInfo;
							res.userInfo.userId = uni.$u.guid(20);
							console.log(res.userInfo);

							this.$store.commit("SET_USERINFO", res.userInfo);
							//缓存token
							const token =
								'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjpbeyJ0b29sdHQiOiJodHRwczovL3Rvb2x0dC5jb20ifV0sImlhdCI6MTY1NjkxOTcyMywiZXhwIjoxNjU3NTI2MzM5LCJhdWQiOiIiLCJpc3MiOiLkuIDlk4HpppnkvJjmg6Dku7fnnIsiLCJzdWIiOiIifQ.-Y46_H9BZBCvZdl7lVRYQ553Ad3XG8cwkJ2M9oKK9Uw'
							this.$store.commit("SET_TOKEN", token);
							//七天有效期
							const sevenExpir = 24 * 60 * 60 * 1000 * 7;
							let now = Date.now() + sevenExpir;
							this.$store.commit('SET_FAILURETIME', now);

							this.hasUserInfo = true;
							this.timeLong = 5000;
							setTimeout(() => {
								this.$refs.countDown.start();
							}, 500)

						}
					})
				}

			},
			onChange(e) {
				uni.showModal({
					showCancel: true,
					title: "跳转提示",
					content: '您已经授权即将跳转至首页',
					success: (res) => {
						if (res.confirm) {
							console.log(res);
							uni.reLaunch({
								url: '/pages/index/index'
							})
						} else {
							uni.showToast({
								title: '您已经取消跳转到首页',
								icon: 'error'
							})
						}

					},
					complete: () => {

					}
				})

			},
			close() {
				this.showModal = false;
				this.showUserInfoModal = false;
			},
			cancel() {
				this.showModal = false;
				this.showUserInfoModal = false;
			},
			toAgreement(type) {
				let url = ''
				switch (type) {
					case 0:
						url = '/static/comm/agreement';
						break;
					case 1:
						url = '/static/comm/agreePrivateInfo'
						break;
					default:
						break;
				}
				uni.navigateTo({
					url
				});
			},
			login() {
				this.showModal = true;
			},
			getphonenumber(e) {
				console.log(e);
				if (e.detail.code && e.detail.errMsg == 'getPhoneNumber:ok') {
					this.showModal = false;
					uni.setStorageSync('phoneCode', e.detail);
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else {
					uni.setStorageSync('phoneCode', "");
				}

			},
			loginUserInfo() {
				this.showUserInfoModal = true;
				this.$refs.countDown.reset();
			},
			getUserInfo(e) {
				this.userInfo = res.detail.userInfo;
				this.showUserInfoModal = false;
			},
		}
	}
</script>

<style lang="scss">
	.user-info {
		display: flex;
		justify-content: center;
		margin: 40px auto;
	}

	.u-modal__button-group--confirm-button {
		padding: 0 !important;
	}

	.btm-class-box {
		width: 100%;
		padding: 0;
		margin: 0;
		box-sizing: border-box;

		.btm-class {
			display: flex;
			height: 100%;

			button {
				width: 100%;
				flex: 1;
				border: none;
				border-radius: 0;
				color: #1a1a1a;

				&::after {
					border: none;
				}
			}
			}
			}
	.login-box {
		margin: 20px 20%;
		box-sizing: border-box;
		text-align: center;
	
	}
	.agreement-box{
		display: flex;
		justify-content: center;
		padding: 20px 40px;
	}
</style>
